<template>
  <div>
    <sky-panel title="嵌套表格">
      <template #main>
        <sky-table
          ref="table"
          nested-tables
          :chopper="3"
          :data="data"
          @get-current="getCurrent"
          @befor-expend="beforExpend"
        >
          <template #default="row">
            <sky-column :row="row.scope" expend prop="name" label="姓名" />
            <sky-column :row="row.scope" prop="age" label="年龄" />
            <sky-column :row="row.scope" prop="home" label="家庭住址" />
          </template>
          <template #expend="row">
            <sky-table ref="innertable" v-slot="downrow" :data="row.scope.heeler">
              <sky-column :row="downrow.scope" prop="name" label="姓名" />
              <sky-column :row="downrow.scope" prop="age" label="年龄" />
              <sky-column :row="downrow.scope" prop="home" label="家庭住址" />
            </sky-table>
          </template>
        </sky-table>
      </template>
    </sky-panel>

  <sky-code-panel>
    <div class="prewrap" v-highlight>
      <!-- 使用指令 -->
      <pre>
        <code class="html">

        &lt;sky-table
          ref="table"
          nested-tables
          :chopper="3"
          :data="data"
          @get-current="getCurrent"
          @befor-expend="beforExpend"
        &gt;
          &lt;template #default="row"&gt;
            &lt;sky-column :row="row.scope" expend prop="name" label="姓名" /&gt;
            &lt;sky-column :row="row.scope" prop="age" label="年龄" /&gt;
            &lt;sky-column :row="row.scope" prop="home" label="家庭住址" /&gt;
          &lt;/template&gt;
          &lt;template #expend="row"&gt;
            &lt;sky-table ref="innertable" v-slot="downrow" :data="row.scope.heeler"&gt;
              &lt;sky-column :row="downrow.scope" prop="name" label="姓名" /&gt;
              &lt;sky-column :row="downrow.scope" prop="age" label="年龄" /&gt;
              &lt;sky-column :row="downrow.scope" prop="home" label="家庭住址" /&gt;
            &lt;/sky-table&gt;
          &lt;/template&gt;
        &lt;/sky-table&gt;


          &lt;script lang="ts"&gt;

        import { defineComponent } from 'vue'

        export default defineComponent({
          setup() {
            const beforExpend = async(row:any, cb: any) => {
              cb()
            }

            const getCurrent = (row: any) => {
              // console.log(row)
            }

            return {
              beforExpend,
              getCurrent
            }
          },
          data() {
            return {
              data: [
                {
                  name: '王重阳',
                  age: 300,
                  home: '武当山',
                  heeler: [
                    { name: '丘处机', age: 56, home: '武当山' },
                    { name: '刘处玄', age: 47, home: '武当山' },
                    { name: '王处一', age: 23, home: '武当山' }
                  ]
                },
                {
                  name: '黄药师',
                  age: 38,
                  home: '桃花岛',
                  heeler: [
                    { name: '梅超风', age: 44, home: '桃花岛' },
                    { name: '黄蓉', age: 27, home: '桃花岛' },
                    { name: '傻姑', age: 21, home: '桃花岛' }
                  ]
                },
                {
                  name: '欧阳锋',
                  age: 38,
                  home: '西域',
                  heeler: [
                    { name: '欧阳克', age: 29, home: '西域' },
                    { name: '杨过', age: 21, home: '桃花岛' }
                  ]
                },
                {
                  name: '洪七公',
                  age: 59,
                  home: '未知',
                  heeler: [
                    { name: '郭靖', age: 28, home: '牛家村' },
                    { name: '黄蓉', age: 27, home: '桃花岛' }
                  ]
                }

              ]
            }
          }
        })

          &lt;/script&gt;

        </code>
    </pre>
    </div>
  </sky-code-panel>

  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const beforExpend = async(row:any, cb: any) => {
      cb()
    }

    const getCurrent = (row: any) => {
      // console.log(row)
    }

    return {
      beforExpend,
      getCurrent
    }
  },
  data() {
    return {
      data: [
        {
          name: '王重阳',
          age: 300,
          home: '武当山',
          heeler: [
            { name: '丘处机', age: 56, home: '武当山' },
            { name: '刘处玄', age: 47, home: '武当山' },
            { name: '王处一', age: 23, home: '武当山' }
          ]
        },
        {
          name: '黄药师',
          age: 38,
          home: '桃花岛',
          heeler: [
            { name: '梅超风', age: 44, home: '桃花岛' },
            { name: '黄蓉', age: 27, home: '桃花岛' },
            { name: '傻姑', age: 21, home: '桃花岛' }
          ]
        },
        {
          name: '欧阳锋',
          age: 38,
          home: '西域',
          heeler: [
            { name: '欧阳克', age: 29, home: '西域' },
            { name: '杨过', age: 21, home: '桃花岛' }
          ]
        },
        {
          name: '洪七公',
          age: 59,
          home: '未知',
          heeler: [
            { name: '郭靖', age: 28, home: '牛家村' },
            { name: '黄蓉', age: 27, home: '桃花岛' }
          ]
        }

      ]
    }
  }
})
</script>
